<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
</head>

<style>
    /* a标签转为块级元素 */
    a {
        display: block;
        width: 230px;
        height: 40px;
        background-color: #55585a;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        
        /* 首行缩进2个字体单位 */
        text-indent: 2em;

        /* 
        目标：将文本垂直居中
        解决方案：将元素内 文本内容高度设置等于盒子高度 
        */

        /* line-height: 40px; */
        /* 验证 文字行高与盒子模型的高度关系 */
        line-height: 80px;
    }
    /* 鼠标经过，变换背景颜色 */
    a:hover {
        background-color: #f7761f;
    }

</style>
<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">平板</a>
    <a href="#">PC电脑</a>
    <a href="#">耳机</a>
    <span id="span">测试文字</span>

    <br>
    <hr>
    <table id="tb01">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hh</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>hh22</td>
                <td>1122</td>
            </tr>
        </tbody>
    </table>

    <br><hr>
</body>
<script>
    let observer = new MutationObserver((mutationRecords) => console.log(mutationRecords)); 
    console.log('Print MutationObserverInit : ');
    console.log(observer.observe);
    // console.log(MutationObserverInit);
    console.log('===================');
observer.observe(document.body, { attributes: true ,attributeOldValue:true }); 
document.body.className = 'foo'; 
console.log('main thread : Changed body class');


new Promise((resolve , reject)=>{
    document.body.className = 'foo1'
    resolve()
}).then(()=>{
    return Promise.resolve(document.body.className = 'foo2')
})
.then(()=>{
    return Promise.resolve(document.body.className = 'foo3')
})





    const tb01 = document.getElementById('tb01')
    console.log(tb01.rows);
    setTimeout(()=>{
        tb01.deleteRow(0)
    } , 2000)

    const span = document.getElementById('span')
    console.log(span);
    console.log('node type : ',span.nodeType);   
     console.log(span.ownerDocument);

    console.dir(span);
    console.log(typeof span);

    let element = document.createElement("div"); 
element.className = "message"; 
let textNode = document.createTextNode("Hello world!"); 
element.appendChild(textNode); 
let anotherTextNode = document.createTextNode("Yippee!"); 
element.appendChild(anotherTextNode); 
document.body.appendChild(element);

setTimeout(()=>{
    element.normalize();
} , 5000)

</script>
</html>